<template>
  <div class="page">
    <div class="page-brand">私信管理</div>
    <div class="g-card" style="height: calc(100% - 40px)">
      <div class="header flex-b align-center">
        <a
          href="javascript:;"
          class="link color-red pointer"
          @click="showModal = true"
        >私信对话注意事项</a>
        <div class="prefix-form-item">
          <div class="prefix-label">选择账号</div>
          <el-select
            v-model="account"
            class="f1 white"
            placeholder="请选择账号"
          >
            <el-option
              v-for="item in accountList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="chat-container">
        <div class="left-box h-100">
          <div class="header flex align-center">
            <div class="page-brand">联系人</div>
          </div>
          <div class="user-list scorll-box">
            <div
              v-for="item in 20"
              :key="item"
              class="item flex align-center pointer"
            >
              <img
                src="@/assets/images/auth/avatar.png"
                alt=""
                class="avatar"
              >
              <div class="f1">
                <div class="flex-b align-center">
                  <div class="name">用户昵称</div>
                  <div class="time">今天</div>
                </div>
                <div class="sub nowrap">
                  你好在吗？你好在吗？你好在吗？你好在吗？
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="middle-box h-100 flex-v flex-b">
          <div class="header flex align-center">
            <div class="page-brand">用户昵称</div>
          </div>
          <div class="chat-list f1 scroll-box">
            <div v-for="item in 3" :key="item" class="item flex">
              <img
                src="@/assets/images/auth/avatar.png"
                alt=""
                class="avatar"
              >
              <div class="g-card">
                哈喽您好老师
                您有做好的线上课程教学吗？[熊吉][熊吉][熊吉][熊吉][吐舌][吐舌][吐舌][吐舌][干饭人][干饭人]
              </div>
            </div>
          </div>
          <div style="box-sizing: border-box; padding: 20px">
            <div class="g-card rel" style="padding-bottom: 50px">
              <el-input
                v-model="msg"
                type="textarea"
                :rows="3"
                placeholder="请输入内容"
                class="transparent"
                resize="none"
              />
              <el-button
                class="abs"
                type="primary"
                style="right: 15px; bottom: 10px"
              >发送</el-button>
            </div>
          </div>
        </div>
        <div class="right-box h-100">
          <div class="header flex align-center">
            <div class="page-brand">用户详情</div>
          </div>
          <div class="text">
            <div>所属账号 ：呆头鹅批量剪辑视频...</div>
            <div>昵称 ：问到课堂</div>
            <div>城市 ：未知</div>
            <div>性别 ：未知</div>
            <div>电话 ：暂无</div>
            <div>是否关注 ：未知</div>
            <div>用户状态 ：有兴趣</div>
            <div>互动记录 ：查看</div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="注意事项"
      :visible.sync="showModal"
      width="400px"
      :modal-append-to-body="false"
    >
      1、回复用户私信，时效为 24小时。消息回复，在用户未发送下一条消息前，48
      小时 内可向用户发送 6 条消息。2、对于每次用户进入会话页 ，最多可以发送 3
      条消息；单日最多回复 3 条会话（单日总计可向同一用户发送 1 - 9
      条消息），两次回复 进入会话页面 的时间间隔需在 1 小时以上最新规则以抖音
      app 内发送消息为准
      <span slot="footer" class="flex-e align-center">
        <el-button type="primary" @click="showModal=false">知道了</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      showModal: false,
      accountList: [],
      account: '',
      msg: ''
    }
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.chat-container {
  display: grid;
  grid-template-columns: 23.5vw 1fr 18.3vw;
  margin-top: 36px;
  background: rgba(0, 119, 255, 0.1);
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 5px;
  height: calc(100vh - 265px);
  overflow: hidden;
  .header {
    height: 56px;
    padding: 0 30px;
    .page-brand {
      margin-bottom: 0;
      font-weight: normal;
    }
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
  }
  .middle-box {
    height: calc(100vh - 265px);
    .chat-list {
      box-sizing: border-box;
      padding: 20px 30px;
      overflow-y: auto;
      .item {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height:24px;
        color: rgba(0, 0, 0, 1);
        margin-bottom: 30px;
      }
    }
  }
  .right-box {
    height: calc(100vh - 265px);
    border-left: 1px solid rgba(128, 128, 128, 0.3);
    .text {
      box-sizing: border-box;
      padding: 20px 30px;

      div {
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24px;
        color: rgba(0, 0, 0, 1);
      }
    }
  }
  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
  }
  .left-box {
    height: calc(100vh - 265px);
    .f1 {
      max-width: calc(100% - 100px);
    }

    .name {
      font-size: 14px;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);
    }
    .sub {
      font-size: 14px;
      font-weight: 400;
      color: rgba(166, 166, 166, 1);
      margin-top: 10px;
    }
    .time {
      font-size: 14px;
      font-weight: 400;
      color: rgba(128, 128, 128, 1);
    }
    .user-list {
      height: calc(100vh - 340px);
      overflow-y: auto;
      box-sizing: border-box;
      padding: 20px 30px;
      border-right: 1px solid rgba(128, 128, 128, 0.3);
      .item {
        margin-bottom: 30px;
        overflow: hidden;
      }
    }
  }
}
.dark{
  .chat-container .left-box .name{
    color:#fff;
  }
  .g-card,.text,.text div{
    color:rgba(255,255,255,0.7) !important;
  }
}
</style>
